<?php /*a:1:{s:64:"D:\projects\original_admin\app\merchant\view\login\register.html";i:1752853466;}*/ ?>
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>TP原创商城卖家端注册</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<script src="/static/merchant/js/jquery-min.js"></script>
	<link rel="stylesheet" href="/static/merchant/layui/css/layui.css">
	<script type="text/javascript" src="/static/merchant/layui/layui.js"></script>
	<link rel="stylesheet/less" type="text/css" href="/static/merchant/css/index.less" />
	<script src="/static/merchant/js/less.js"></script>

</head>

<body>
	<main class="LoginMain">
		<div class="logo  ">
			<img src="/static/merchant/images/logo.png">
		</div>

		<div class="login-container layui-main">
			<div class="login-card">
				<div class="card-header">
					<img src="/static/merchant/images/loginText.png">
				</div>
				<div class="layui-card-body">
					<h1>注册</h1>
					<form class="layui-form" id="captchaLoginForm">
						<div class="layui-form-item">
							<input type="text" name="phone" placeholder="请输入手机号" class="layui-input" id="captchaPhone">
							<div class="error-message" id="captchaPhoneError">请输入正确的手机号</div>
						</div>

						<div class="layui-form-item">

							<div class="layui-row">
								<div class="layui-col-xs7">
									<input type="text" name="captcha" placeholder="请输入验证码" class="layui-input"
										id="captchaInput">
									<div class="error-message" id="captchaError">请输入验证码</div>

								</div>
								<div class="layui-col-xs5">
									<div class="btnBlock">

										<button type="button" class="layui-btn layui-btn-normal"
											id="getCaptchaBtn">获取验证码</button>
									</div>
								</div>

							</div>
						</div>

						<div class="layui-form-item">

							<div class="">
								<input type="password" name="password" placeholder="请输入密码" class="layui-input"
									id="passwordInput" lay-affix="eye">
							</div>
							<div class="error-message" id="passwordError">请输入密码</div>
						</div>
						<div class="layui-form-item">

							<div class="">
								<input type="password" name="password" placeholder="请确认密码" class="layui-input"
									id="passwordInput1" lay-affix="eye">
							</div>
							<div class="error-message" id="passwordError1">两次输入的密码不一致</div>
						</div>

						<div class="layui-form-item">
							<button type="button" class="layui-btn layui-btn-fluid" id="captchaLoginBtn"
								disabled>注册</button>
						</div>
						<div class="layui-form-item">
							<div id="captchaAgree">
								<input type="checkbox" name="agree" value="1" lay-filter="agree">

								<div lay-checkbox>
									我已阅读并同意<a lay-on="xieyi">《用户协议》</a>和<a lay-on="yinsi">《隐私政策》</a>
								</div>

							</div>
						</div>
						<div class="layui-form-item signup">
							<a class="" href="/merchant/login.html">已有账号？立即登录</a>
						</div>
					</form>
				</div>
			</div>
		</div>
		</div>
		<div class="foot">
			<a href="https://beian.mps.gov.cn/#/query/webSearch">辽公网安备21029602000910</a> | <a
				href="https://beian.miit.gov.cn/">辽ICP备2023009263号-2</a><br>
			© 2023 All rights reserved

		</div>
	</main>
    <script src="/static/merchant/js/base.js"></script>
	<script>

		layui.use(function () {

			var form = layui.form;
			var layer = layui.layer;
			var tabs = layui.tabs;
			var util = layui.util;

			util.on('lay-on', {
				'xieyi': function () {

					layer.alert('内容内容内容', {
						title: '用户协议',
						skin: 'xieyiDialog'
					});
				},
				'yinsi': function () {
					layer.alert('内容内容内容', {
						title: '隐私协议',
						skin: 'xieyiDialog'
					});
				},


			})

			// 手机号验证正则
			const PHONE_REGEX = /^1[3-9]\d{9}$/;

			// 通用表单验证函数
			function validateForm(formType) {
				let isValid = true;

				const phone = $('#captchaPhone').val();
				const captcha = $('#captchaInput').val();
				const agree = $('#captchaAgree .layui-form-checked').length > 0
				const password = $('#passwordInput').val();
				const password1 = $('#passwordInput1').val();

				// 验证手机号
				if (!PHONE_REGEX.test(phone)) {
					$('#captchaPhoneError').show();
					isValid = false;
				} else {
					$('#captchaPhoneError').hide();
				}

				// 验证验证码
				if (!captcha) {
					$('#captchaError').show();
					isValid = false;
				} else {
					$('#captchaError').hide();
				}

				// 验证密码
				if (!password) {
					$('#passwordError').show();
					isValid = false;
				} else {
					$('#passwordError').hide();
				}

				// 验证确认密码（与密码一致）
				if (password !== password1) {
					$('#passwordError1').show(); // 显示"两次输入的密码不一致"
					isValid = false;
				} else if (!password1) {
					$('#passwordError1').show(); // 若确认密码为空，也显示错误
					isValid = false;
				} else {
					$('#passwordError1').hide();
				}
				// 验证是否同意协议
				if (!agree) {
					isValid = false;
				}

				// 更新登录按钮状态
				$('#captchaLoginBtn').prop('disabled', !isValid);


				return isValid;
			}
			form.on('submit(agree)', function (data) {
				validateForm('password');
			});
			// 密码登录表单输入监听
			$('#passwordPhone, #passwordInput').on('input', function () {
				validateForm('password');
			});
			$('#passwordPhone, #passwordInput1').on('input', function () {
				validateForm('password');
			});


			// 密码登录协议勾选监听
			$('#passwordAgree').on('click', function () {
				validateForm('password');
			});

			// 验证码登录表单输入监听
			$('#captchaPhone, #captchaInput').on('input', function () {
				validateForm('captcha');
			});

			// 验证码登录协议勾选监听
			$('#captchaAgree').on('click', function () {
				validateForm('captcha');
			});

			// 获取验证码按钮点击事件
			$('#getCaptchaBtn').on('click', function () {
				const phone = $('#captchaPhone').val();

				if (!PHONE_REGEX.test(phone)) {
					layer.msg('请输入正确的手机号', {
						icon: 2
					});
					return;
				}

				// 倒计时逻辑
				let countdown = 60;
				$(this).prop('disabled', true).text(`${countdown}s后重试`);

				const timer = setInterval(() => {
					countdown--;
					$(this).text(`${countdown}s后重试`);

					if (countdown <= 0) {
						clearInterval(timer);
						$(this).prop('disabled', false).text('获取验证码');
					}
				}, 1000);

				// 模拟发送验证码
				layer.msg('验证码已发送，请注意查收', {
					icon: 1
				});
			});

			// 密码登录按钮点击事件
			$('#passwordLoginBtn').on('click', function () {
				if (validateForm('password')) {
					const phone = $('#passwordPhone').val();
					const password = $('#passwordInput').val();

					// 实际项目中这里应该发送登录请求
					console.log('密码登录:', {
						phone,
						password
					});
					layer.msg('注册中...', {
						icon: 16,
						time: 2000
					});

					// 模拟登录成功
					setTimeout(() => {
						layer.msg('正在跳转...', {
							icon: 1
						});
						// 这里可以添加页面跳转逻辑
					}, 2000);
				}
			});

			// 验证码登录按钮点击事件
			$('#captchaLoginBtn').on('click', function () {
				if (validateForm('captcha')) {
					const phone = $('#captchaPhone').val();
					const captcha = $('#captchaInput').val();
                    var that = $(this)
                    ajaxRequest('/merchant/merchant-register', {
                        phone: phone,
                        captcha: captcha,
                        password: $('#passwordInput').val(),
                        captcha: $('#captchaInput').val()
                    }, 'POST', this, function (response) {
                        layer.msg('注册成功,请等待审核。。。')
                    });
					
				
				}
			});

			// 初始化验证
			validateForm('password');


		});
	</script>
</body>

</html>